﻿@page "/news/{page?}"
@inject ApiHelper apiHelper
@{
	var pageParam = RouteData.Values["page"] as string;
	int page = pageParam == "/News" ? 1 : Convert.ToInt32(pageParam);
	int pagesize = 20;
	var list = await apiHelper.PageArticleByTagAsync(page, pagesize, "news");
}
<div class="section">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="section-heading heading-center">
					<div class="section-subheading">most interesting articles</div>
					<h1>News</h1>
				</div>
			</div>
			@foreach (var item in list.Items)
			{
				<div class="col-lg-4 col-md-6 col-12 item">
					<!-- Begin news item -->
					<article class="news-item item-style">
						<a href="@item.Slug" class="news-item-img">
							<img data-src="@item.FeatureImage" class="lazy" src="@item.FeatureImage" alt="">
						</a>
						<div class="news-item-info">
							<div class="news-item-date">@item.CreatedAt</div>
							<h2 class="news-item-heading item-heading">
								<a href="@item.Slug" title="@item.Title">@item.Title</a>
							</h2>
							<div class="news-item-desc">
								<p>@item.Title</p>
							</div>
						</div>
					</article><!-- End news item -->
				</div>
			}

			<div class="col-12">
				@if(list.TotalPages>1)
				{
					<!-- Begin pagination -->
					<nav class="pagination">
						<ul class="pagination-list">
							<li class="pagination-item-arrow pagination-item-arrow-prev pagination-item-disabled"><a href="#!"><i class="material-icons md-24">chevron_left</i></a></li>
							@for(var i=1;i<list.TotalPages;i++)
							{
								if(list.CurrentPage==i)
								{
									<text><li class="active"><a href="#!">@i</a></li></text>
								}else
								{
									<text><li><a href="/news/@i">@i</a></li></text>
								}
							}
							<li class="pagination-item-arrow pagination-item-arrow-next"><a href="#!"><i class="material-icons md-24">chevron_right</i></a></li>
						</ul>
					</nav>

					<!-- End pagination -->
				}
				
			</div>
		</div>
	</div>
</div>

				@section css
				{
	<style>
		main {
			margin: auto;
			padding: 1rem;
			width: 800px;
			max-width: calc(100% - 2rem);
			color: white;
			font-size: 20px;
			line-height: 1.6;
		}

		.astro-a {
			position: absolute;
			top: -32px;
			left: 50%;
			transform: translatex(-50%);
			width: 220px;
			height: auto;
			z-index: -1;
		}

		h1 {
			font-size: 4rem;
			font-weight: 700;
			line-height: 1;
			text-align: center;
			margin-bottom: 1em;
		}

		.text-gradient {
			background-image: var(--accent-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-size: 400%;
			background-position: 0%;
		}

		.instructions {
			margin-bottom: 2rem;
			border: 1px solid rgba(var(--accent-light), 25%);
			background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
			padding: 1.5rem;
			border-radius: 8px;
		}

			.instructions code {
				font-size: 0.8em;
				font-weight: bold;
				background: rgba(var(--accent-light), 12%);
				color: rgb(var(--accent-light));
				border-radius: 4px;
				padding: 0.3em 0.4em;
			}

			.instructions strong {
				color: rgb(var(--accent-light));
			}

		.link-card-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
			gap: 2rem;
			padding: 0;
		}
	</style>

				}